<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/>
    <title>AMap JSAPI Loader</title>
    <style>
        html, body, #container {
            height: 100%;
            width: 100%;
            margin: 0;
        },
		.table {
		  display: none;
		}
    </style>
</head>
<body>
<div id="container" tabindex="0"></div>
<div id="myPageTop">
    <table id="table1" class="table">
        <tr>
            <td>
                <label>请输入起点：</label>
            </td>
        </tr>
        <tr>
            <td>
                <input id="tipinput1"/>
            </td>
        </tr>
        <tr>
            <td>
                <label>请输入终点：</label>
            </td>
        </tr>
        <tr>
            <td>
                <input id="tipinput2"/>
            </td>
        </tr>
        <tr>
            <td>
                <input id="gobtn" type="button" value="出发">
            </td>
        </tr>
	</table>
	
	<table id="table2" class="table" style="display: none;">
        <tr>
            <td>
                当前天气： <span id="tianqi"></span>
            </td>
        </tr>
        <tr>
            <td>
                总路程： <span id="distance"></span>公里
            </td>
        </tr>
        <tr>
            <td>
                总耗时： <span id="time"></span>分钟
            </td>
        </tr>
        <tr>
            <td>
                预估费用：<span id="price"></span>元
            </td>
        </tr>
        <tr>
            <td>
                <input type="button" value="立即打车" id="createOrder">
            </td>
        </tr>
    </table>
</div>
<script type="text/javascript">
    window._AMapSecurityConfig = {
        //秘钥
        securityJsCode:"1c17f02cfbd61a930e0b2a3574236e51",
    }
</script>
<script src="https://webapi.amap.com/loader.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    AMapLoader.load({ //首次调用 load
        key:'240d08626bdb98809eb7a4be9f5fd610',//首次load key为必填
        version:'2.0',
        plugins:['AMap.PlaceSearch','AMap.AutoComplete','AMap.Driving','AMap.Weather']
    }).then((AMap)=>{
        //订单对象
        var TbOrder={
		    //金额
			orderMoney:'',
			//起点
			orderOrigin:'',
			//终点
			orderDestination:'',
			//里程
			orderDistance:'',
			//时长
			orderDuration:'',
			
        }

        //起点
        var start = {
            coordinateLongitude:0,
            coordinateLatitude: 0,
            coordinateName:'',
        }
        //终点
        var end = {
            coordinateLongitude:0,
            coordinateLatitude: 0,
            coordinateName:'',
        }


        const map = new AMap.Map('container');
        var autoOptions1 = {
            input: "tipinput1"
        };
        var auto1 = new AMap.AutoComplete(autoOptions1);
        var placeSearch1 = new AMap.PlaceSearch({
            city: "010", // 兴趣点城市
            citylimit: true,  //是否强制限制在设置的城市内搜索
            map: map,
            autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
        });  //构造地点查询类

        auto1.on("select", select1);//注册监听，当选中某条记录时会触发
        function select1(e) {
            placeSearch1.setCity(e.poi.adcode);
            placeSearch1.search(e.poi.name);  //关键字查询查询
        }

        placeSearch1.on('markerClick',markerClick1);
        function markerClick1(e){
            //设置起点信息

            start.coordinateLongitude = e.data.entr_location.lng
            start.coordinateLatitude = e.data.entr_location.lat
            start.coordinateName=e.data.cityname+","+e.data.name
            // //上车位置
            TbOrder.orderOrigin = start.coordinateLongitude+","+start.coordinateLatitude
            // TbOrder.tbCoordinates.start.coordinateName=e.data.cityname+","+e.data.name

            let city = e.data.cityname
            let place = e.data.name

            let coordinate = city+place
            console.log("城市："+city)
            console.log("上车位置："+e.data.name)
            console.log("上车坐标："+coordinate)
            console.log("起点："+start.coordinateLongitude+","+start.coordinateLatitude)
        }

        var autoOptions2 = {
            input: "tipinput2"
        };
        var auto2 = new AMap.AutoComplete(autoOptions2);
        var placeSearch2 = new AMap.PlaceSearch({
            city: "010", // 兴趣点城市
            citylimit: true,  //是否强制限制在设置的城市内搜索
            map: map,
            autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
        });  //构造地点查询类

        auto2.on("select", select2);//注册监听，当选中某条记录时会触发
        function select2(e) {
            placeSearch2.setCity(e.poi.adcode);
            placeSearch2.search(e.poi.name);  //关键字查询查询
        }

        placeSearch2.on('markerClick',markerClick2);
        function markerClick2(e){
            end.coordinateLongitude = e.data.entr_location.lng
            end.coordinateLatitude = e.data.entr_location.lat

            //终点详细位置
            end.coordinateName=e.data.cityname+","+e.data.name
            //下车位置
            TbOrder.orderDestination = end.coordinateLongitude+","+end.coordinateLatitude
            console.log("下车位置："+e.data.name)
            console.log("终点："+end.coordinateLongitude+","+end.coordinateLatitude)
        }
        //监听出发按钮
        var gobtn = document.getElementById("gobtn");
        gobtn.addEventListener("click", myFunction);
		
		var table1 = document.getElementById('table1');
		var table2 = document.getElementById('table2');
		
		gobtn.addEventListener('click', function() {
		  if (table2.style.display === 'none') {
		    table2.style.display = 'block';
		    table1.style.display = 'none';
		  }
		});
		
		
        function myFunction(){
            var driving = new AMap.Driving({
                map: map,
            });
            // 根据起终点经纬度规划驾车导航路线 
			driving.search(new AMap.LngLat(start.coordinateLongitude,start.coordinateLatitude), new AMap.LngLat(end.coordinateLongitude,end.coordinateLatitude),
			// driving.search(new AMap.LngLat("116.24316", "39.950869"), new AMap.LngLat("116.229156", "39.93069"),
                function(status, result) {
                    if (status === 'complete') {
                        console.log('绘制驾车路线完成')
                        //result历程规划参数                           留两位
                        var distance = (result.routes[0].distance/1000).toFixed(2)
                        //           时间向上取整
                        var time = Math.ceil(result.routes[0].time/60)
                        //价格计算留2位
                        var price  = (distance*1.7+time*0.3).toFixed(2)


                        //公里
                        document.getElementById("distance").innerText = distance
                        //时长
                        document.getElementById("time").innerText = time
                        //价格需要根据公里预估去结算
                        document.getElementById("price").innerText = price
                        TbOrder.orderMoney = price
						TbOrder.orderMileage = distance
						TbOrder.orderDuration = time
						console.log(TbOrder)
                    } else {
                        console.log('获取驾车数据失败：' + result)
                    }
                });

            //加载天气查询插件
            AMap.plugin('AMap.Weather', function() {
                //创建天气查询实例
                var weather = new AMap.Weather();
                //执行实时天气信息查询
                weather.getLive('全国', function(err, data) {
                    TbOrder.weather = data.weather
                    console.log(TbOrder.weather)
                    document.getElementById("tianqi").innerText = TbOrder.weather
                });
            });

        }

        //点击按钮下单
        var createOrder = document.getElementById("createOrder");
        createOrder.addEventListener("click", addOrder);
        var arr = TbOrder
        function addOrder(){
            //发送axios请求
            axios({
                method:'post',
                url:'http://127.0.0.1:9305/order/createOrder',
                data:arr
            }).then((res)=>{
				if(res.data.code=10000){
					console.log(res.data.message)
				}
            })
        }



    }).catch((e)=>{
        console.error(e);
    });

</script>
</body>
</html>